<template>
	<div style="height: 100%; width: 100%">
		<div class="_bg">
			<div class="_title">
				<span></span>
				<div>
					<i></i>
					<p>统一身份认证平台</p>
				</div>
			</div>
			<div class="login_logo"></div>
			<div class="login_Box">
				<div class="loginBox_title">
					<span style="font-size: 35px">用户登录</span>
					<div style="width: 1px; height: 28px; background: #cdcdcd; border: 1px solid #4f9df4"></div>
					<span>统一身份认证平台</span>
				</div>
				<div class="loginBox_form">
					<el-radio-group v-model="loginType">
						<el-radio :value="1">老师</el-radio>
						<el-radio :value="2">学生</el-radio>
						<el-radio :value="3">家长</el-radio>
					</el-radio-group>
					<div class="_zhanghao">
						<i style="background-image: url('/imgs/login/zh_icon.png')"></i>
						<input v-model="adminValue" type="text" placeholder="请输入用户名" />
					</div>
					<div class="_zhanghao">
						<i style="background-image: url('/imgs/login/mm_icon.png')"></i>
						<input v-model="passwordValue" type="password" placeholder="请输入密码" />
					</div>
					<el-checkbox class="remeber" v-model="rememberMe">记住密码</el-checkbox>
					<div @click="forget" class="forget">忘记密码</div>
					<span class="pbtn btnLogin" @click="loginAdd">登录</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	ref,
	onMounted
} from 'vue'
import {
	ElMessage
} from 'element-plus'
import apis from '@/api/index.js'
import apisyw from '@/api/index_yw.js'
import router from '@/router'

const _api = apis()
const _apiyw = apisyw()

const loginType = ref(1)
const adminValue = ref('')
const passwordValue = ref('')
const rememberMe = ref(false)
//密码忘记点击事件
const forget = () => {
	router.push('/forget')
}
//加密密码传输
function b64EncodeUnicode(str) {
	return btoa(unescape(encodeURIComponent(str)))
};
//解密
function decodePassword(encodedPassword) {
	// 首先使用 atob() 解码 Base64 字符串
	let decoded = atob(encodedPassword);
	// 然后将解码后的字符串进行 URI 解码
	return decodeURIComponent(decoded);
};
// 加载保存的凭据
onMounted(() => {
	const savedUsername = localStorage.getItem('username')
	const savedPassword = localStorage.getItem('password')
	if (savedUsername) {
		adminValue.value = savedUsername
		rememberMe.value = true // 如果有保存的用户名，勾选“记住密码”
	}
	if (savedPassword) {
		passwordValue.value = decodePassword(savedPassword)
	}
})
//教务系统
const loginAdd = () => {
	const username = adminValue.value;  // 假设 adminValue 是绑定的用户名
	const password = passwordValue.value;  // 假设 passwordValue 是绑定的密码
	if (!username && !password) {
		ElMessage.error('账户名密码不能为空');
		return;  // 直接返回，阻止后续逻辑执行
	}
	// 账户名或密码为空时提示错误
	if (!username) {
		ElMessage.error('账户名不能为空');
		return;  // 直接返回，阻止后续逻辑执行
	}
	if (!password) {
		ElMessage.error('密码不能为空');
		return;  // 直接返回，阻止后续逻辑执行
	}
	let url = _jwHtml + '/sys/user/login'
	let dat = {
		username: adminValue.value,
		password: b64EncodeUnicode(passwordValue.value),
		type: loginType.value
	}
	_api.hDoPost(url, '', dat, (res) => {
		if (res.code == 0) {
			localStorage.setItem('LocalData', JSON.stringify({
				access_token: res.data.accessToken,
				userInfo: res.data
			}))
			localStorage.setItem('userId', res.data.userId)
			if (rememberMe.value) {
				localStorage.setItem('username', adminValue.value)
				localStorage.setItem('password', b64EncodeUnicode(passwordValue.value))
			} else {
				localStorage.removeItem('username')
				localStorage.removeItem('password')
			}
			loginNext()
		} 
		else {
			ElMessage.error(res.msg)
		}
		// refresh()
	})
}
//运维
const loginNext = () => {
	let url = _ywHtml + '/login'
	let dat = {
		username: adminValue.value,
		password: b64EncodeUnicode(passwordValue.value)
	}
	_apiyw.hDoPost(url, '', dat, (res) => {
		if (res.code == 200) {
			ElMessage({
				message: '登录成功！',
				type: 'success'
			})
			localStorage.setItem(
				'Admin-Token',
				JSON.stringify({
					admin_token: res.token
				})
			)
			router.push('/index')
		}else {
			// localStorage.clear()
			// ElMessage.error(res.msg)
		}
		refresh()
	})
}

const refresh = () => {
	setTimeout(
		() => {
			ElMessage({
				message: '登录超时，请重新登录！',
				type: 'error'
			})
			localStorage.clear()
			router.push('/Login')
		},
		//原来半小时
		// 1000 * 60 * 30
		//改为4小时
		4*3600*1000
	)
}
</script>
<style lang="scss" scoped>
.remeber {
	position: absolute;
	top: 379px;
	left: 60px;
}

.forget {
	position: absolute;
	top: 385px;
	left: 406px;
	font-size: 14px;
}

._bg {
	background-image: url('/imgs/login/loginBg.png');
	background-size: 100% 100%;
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	// z-index: 9999;
}

._title {
	position: absolute;
	top: 0;
	width: 100%;
	height: 75px;
	// left: 211px;
	background: #5db4ff;
	display: flex;

	span {
		width: 378px;
		height: 75px;
		background: #41a3f8;
		background-image: url('/imgs/login/xx_logo.png');
		background-position: center;
		background-repeat: no-repeat;
	}

	div {
		width: calc(100% - 378px);
		height: 75px;
		display: flex;
		align-items: center;

		i {
			background-image: url(/imgs/login/c_circle.png);
			width: 22px;
			height: 22px;
			margin: 0 30px;
		}

		p {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 26px;
			color: #ffffff;
			line-height: 21px;
		}
	}
}

.login_logo {
	width: 923px;
	height: 648px;
	background-image: url('/imgs/login/login_logo.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 296px;
	left: 155px;
}

.login_Box {
	width: 526px;
	height: 544px;
	background-image: url('/imgs/login/boxBg.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 264px;
	right: 190px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.loginBox_title {
		width: 382px;
		height: 70px;
		margin-top: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		span {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 21px;
			color: #5db4ff;
		}
	}

	.loginBox_form {
		margin-top: 30px;
		width: 410px;
		height: 320px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		._zhanghao {
			width: 406px;
			height: 58px;
			background: #ffffff;
			border-radius: 8px;
			border: 1px solid #54b5ff;
			display: flex;
			align-items: center;
			padding: 0 20px;

			i {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-position: center;
				width: 27px;
				height: 29px;
			}

			input {
				margin-left: 12px;
				border: none;
				background: none;
				height: 50px;
				width: 270px;
				font-family: ShiShangZhongHeiJianTi;
				font-weight: 400;
				font-size: 26px;
				color: #4f9df4;
			}

			input::placeholder {
				font-family: ShiShangZhongHeiJianTi;
				font-weight: 400;
				font-size: 26px;
				color: #c0c0c0;
				font-style: italic;
			}
		}

		span {
			margin-top: 20px;
			width: 405px;
			height: 60px;
			background: #4f9df4;
			border-radius: 8px;
			font-family: ShiShangZhongHeiJianTi;
			font-weight: 400;
			font-size: 28px;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>